<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>10_总结Vue数据监测</title>
</head>
<body>
    
    <!-- 
            

            Vue监视数据的原理：
                1.Vue会监视data中所有层次的数据

                2.如何监测对象中的数据？
                    通过setter实现监视，且要在 new Vue 时就传入要监测的数据。
                        (1).对象中后追加的属性，Vue默认不做响应式处理
                        (2.)如需给后添加的属性做响应式，请使用如下 API：
                            Vue.set(target, propertyName/index ,value) 
                        或
                            vm.$set(target, propertyName/index ,value)
                        例：
                            修改第一个爱好为'开车'
                            Vue.set(this.student.hobby,0,'开车2');
                            添加性别属性，默认为男
                            this.$set(this.student,'sex','男')

                3.如何检测数组中的数据？
                    通过包裹数组更新元素的方法实现，本质就是做了两件事：
                        (1).调用原生对应的方法对数组进行更新。
                        (2).更新解析模板，进而更新页面。
                
                4.在Vue修改数组中的某个元素一定要用如下方法：
                    1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                    2.Vue.set() 或 vm.$set()

                特别注意：Vue.set() 和 vm.$set() 不能给 vm（Vue下面） 或 vm 的根数据对象（vm._data下面）添加属性!!!!

     -->


    <!-- 容器 -->
    <div id="root">
        <button @click="student.age++">年龄+1</button>
        <button @click.once="addSex">添加性别属性，默认值：男</button>
        <button @click.once="addFriend">在列表首位添加一个朋友</button>
        <button @click="updateName">修改第一个朋友的名字为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为：开车</button>


        <!-- 
            0 、NaN、null、undefined 都会被隐式转换为 false
         -->
       <h1>学生信息</h1>
       <h2>学生姓名：{{student.name}}</h2>
       <h2 v-if="student.sex">性别：{{student.sex}}</h2>
       <h2>学生年龄:{{student.age}}</h2>
       <hr>
       <h1>爱好</h1>
       <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
             {{h}}
        </li>
      </ul>

       <h1>朋友们</h1>
       <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}} --- {{f.age}}
        </li>
      </ul>

    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

      
       // 用 computed 实现
       const vm= new Vue({
            el:'#root',
            data:{
                student:{
                    name:'tom',
                    age:18,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36},
                    ]
                }
            },
            methods:{
                addSex(){
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'jone',age:28})
                },
                updateName(){
                    this.student.friends[0].name = '张三';
                },
                addHobby(){
                    // this.$set(this.student.hobby,'代码');
                    this.student.hobby.push('代码')
                },
                updateHobby(){
                    this.student.hobby.splice(0,1,'开车')
                    // this.$set(this.student.hobby,0,'开车2');
                }
            }
            
            
            
        })
        // push()用来向数组的末尾添加一个或多个元素，并返回数组新的长度
        // pop()用来删除数组的最后一个元素，并返回被删除的元素
        // unshift()向数组的前边添加一个或多个元素，并返回数组的新的长度
        // shift()删除数组的前边的一个元素，并返回被删除的元素
        // slice(index，index2)可以从一个数组中截取指定的元素 index(包括)，index3(不包括)
    
        // splice()可以用来删除数组中指定元素，并使用新的元素替换
        //  将删除的元素封装到新数组中返回
        //      参数：
        //      1.删除开始位置的索引                                            
        //      2.删除的个数                                                    
        //      3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边

       
    </script>
</body>
</html>